<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="header-content">
          <h1>A股智能行情分析</h1>
          <el-button 
            type="text"
            class="rules-btn"
            @click="showRules = true"
          >
            <i class="el-icon-info"></i>
            预测规则说明
          </el-button>
        </div>
      </el-header>
      
      <el-main>
        <el-card>
          <el-tabs v-model="activeTab">
            <el-tab-pane :label="`涨幅榜(${topGainers.length})`" name="gainers">
              <stock-list
                :data="topGainers"
                type="up"
              />
            </el-tab-pane>
            <el-tab-pane :label="`跌幅榜(${topLosers.length})`" name="losers">
              <stock-list
                :data="topLosers"
                type="down"
              />
            </el-tab-pane>
            <el-tab-pane :label="`智能推荐(${recommendations.length})`" name="recommendations">
              <stock-recommendations :data="recommendations" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-main>
    </el-container>

    <!-- 预测规则说明抽屉 -->
    <el-drawer
      title="预测规则说明"
      :visible.sync="showRules"
      direction="rtl"
      size="50%"
    >
      <div class="rules-content">
        <h3>综合评分构成 (总分100分)</h3>
        <el-divider></el-divider>
        
        <h4>1. 趋势动量分析 (35%)</h4>
        <p>根据股票的涨跌幅、三日涨幅和五日涨幅等动量指标进行分析</p>
        
        <h4>2. 成交量分析 (25%)</h4>
        <p>分析股票的量比和换手率等交易活跃度指标</p>
        
        <h4>3. 估值分析 (20%)</h4>
        <p>基于市盈率(PE)等估值指标进行分析</p>
        
        <h4>4. 技术形态分析 (20%)</h4>
        <p>分析股票的技术形态特征，包括：</p>
        <ul>
          <li>连板风险评估：超过3板风险较大，1-3板有一定机会</li>
          <li>反转信号：超跌反弹(五日跌幅>8%且三日为正)或超涨回调</li>
          <li>突破信号：当日涨幅>5%且三日为正，或三日>8%且五日>12%</li>
          <li>趋势延续：涨跌方向一致且幅度符合要求</li>
        </ul>
        
        <h3>预测建议分级</h3>
        <el-divider></el-divider>
        <el-table :data="recommendationLevels" border style="width: 100%">
          <el-table-column prop="level" label="建议等级" width="100"></el-table-column>
          <el-table-column prop="score" label="分数区间" width="100"></el-table-column>
          <el-table-column prop="description" label="说明"></el-table-column>
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import StockList from '@/components/StockList.vue'
import StockRecommendations from '@/components/StockRecommendations.vue'

export default {
  name: 'Home',
  
  components: {
    StockList,
    StockRecommendations
  },
  
  data() {
    return {
      activeTab: 'gainers',
      showRules: false,
      recommendationLevels: [
        { level: '强烈推荐', score: '≥90', description: '各项指标都很优秀' },
        { level: '建议买入', score: '80-89', description: '大部分指标表现良好' },
        { level: '可以关注', score: '70-79', description: '有一定投资价值' },
        { level: '需要观察', score: '60-69', description: '建议观察变化趋势' },
        { level: '保持观望', score: '50-59', description: '等待更好时机' },
        { level: '注意风险', score: '40-49', description: '存在一定风险' },
        { level: '建议规避', score: '<40', description: '风险较大' }
      ]
    }
  },
  
  computed: {
    ...mapState('stocks', ['topGainers', 'topLosers', 'recommendations'])
  },
  
  methods: {
    ...mapActions('stocks', ['fetchStockData'])
  },
  
  created() {
    this.fetchStockData()
    // 每30秒更新一次数据
    this.timer = setInterval(() => {
      this.fetchStockData()
    }, 30000)
  },
  
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped>
.home {
  padding: 20px;
}

.el-header {
  text-align: center;
  line-height: 60px;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.rules-btn {
  color: #409EFF;
}

.rules-content {
  padding: 20px;
}

.rules-content h3 {
  color: #303133;
  margin-bottom: 20px;
}

.rules-content h4 {
  color: #606266;
  margin: 16px 0;
}

.rules-content p {
  color: #606266;
  line-height: 1.6;
  margin: 8px 0;
}

.rules-content ul {
  color: #606266;
  padding-left: 20px;
  margin: 8px 0;
}

.rules-content li {
  line-height: 1.8;
}

.el-tabs {
  margin-bottom: 20px;
}

.el-main {
  max-width: 1200px;
  margin: 0 auto;
}
</style> 